<template>
	<view :data-theme="theme" class="container">
		<view class="card">
			<view class="header-top">
				<u--image :radius="5" :showLoading="true" :src="activeData.image" width="80px" height="80px"></u--image>
				<view class="header_name"><span
						v-if="activeData.brandName">[{{activeData.brandName}}]</span>{{activeData.name}}{{activeData.sku}}
				</view>
			</view>
			<view class="content" style="display: flex;font-size: 33rpx;margin: 20rpx 0;color: #000;">
				<view style="flex: 2;">
					{{activeData.operateCityName}}
				</view>
				<view style="flex: 3;">
					￥{{oldPrice}} <text
						style="color: #999;text-decoration: line-through;margin-left: 20rpx;">￥{{activeData.price}}</text>
				</view>
			</view>
			<view class="content" style="display: flex;font-size: 33rpx;margin: 30rpx 0;color: #000;">
				<view style="flex: 2;">
					客户范围
				</view>
				<view style="flex: 3;">
					品类尝鲜客户
				</view>
			</view>
			<view class="card-bg" style="border-radius: 20rpx;background-color: #fafafa;padding: 20rpx;color: #636363;">
				<view class="content" style="display: flex;font-size: 30rpx;margin: 40rpx 0;align-items: center;">
					<view style="flex: 2;">
						尝鲜促销价
					</view>
					<view style="flex: 3;display: flex;align-items: center;">
						<view style="flex: 1;line-height: 60rpx;">
							<input type="number" step="0.01" v-model.trim="activeData.activityPrice" :min="0"
								style="border: 2rpx solid #e3e3e3;background-color: #fefefe;width: 180rpx;height: 60rpx; border-radius: 10rpx;padding-left: 56rpx;position: absolute;"
								@blur="blur" />
							<span style="position: relative;top: 50%;left: 20rpx;color: #999;">￥</span>
						</view>
						<view v-if="showNewTop" style="flex: 1;color: #fe5c2d;font-size: 28rpx;line-height: 1.2;">
							录入价格不符合报名要求，请重新录入
						</view>
					</view>
				</view>
				<view v-if="showNewTop" style="display: flex;margin-top: -20rpx;font-size: 28rpx;">
					<view style="flex: 2;">
						&nbsp
					</view>
					<view style="flex: 3;">
						<text
							style="background-color: #fcf0f0;padding: 6rpx;color: #e76444;">最高可设置￥{{(oldPrice * 0.99).toFixed(2)}}</text>
					</view>
				</view>

				<view class="content" style="display: flex;font-size: 30rpx;margin: 30rpx 0;align-items: center;">
					<view style="flex: 2;">
						促销总库存
					</view>
					<view class="sku-select1" style="flex: 3;">
						<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
							<view class="flex-text" :class='ele.type == totalInventoryModel?"right-class-active":""'
								v-for="(ele,index1) in skuArr2" :key="index1" @click="tapAttr2(ele,'1')">
								{{ele.name}}
							</view>
						</view>
					</view>
				</view>
				<view v-if="showTotalInventory" style="display: flex;margin-top: -20rpx;">
					<view style="flex: 2;">
						&nbsp
					</view>
					<view style="flex: 3;">
						<view class="text_input" style="height: 50rpx;">
							<u-number-box v-model="activeData.promotionInventory" button-size="28" inputWidth="60"
								@blur="blur2"></u-number-box>
						</view>
					</view>
				</view>
				<view class="content" style="display: flex;font-size: 30rpx;margin: 30rpx 0;align-items: center;">
					<view style="flex: 2;">
						单客户单日限购
					</view>
					<view class="sku-select1" style="flex: 3;">
						<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
							<view class="flex-text" :class='ele.type == daylimitModel?"right-class-active":""'
								v-for="(ele,index1) in skuArr2" :key="index1" @click="tapAttr2(ele,'2')">
								{{ele.name}}
							</view>
						</view>
					</view>
				</view>
				<view v-if="showDayLimitModel" style="display: flex;margin-top: -20rpx;">
					<view style="flex: 2;">
						&nbsp
					</view>
					<view style="flex: 3;">
						<view class="text_input" style="height: 50rpx;">
							<u-number-box v-model="activeData.customerDailyLimit" button-size="28" inputWidth="60"
								@change="dayValChange" @blur="blur3"></u-number-box>
						</view>
					</view>
				</view>
				<view v-if="iscompareTrue" style="display: flex;font-size: 28rpx;margin-top: 20rpx;">
					<view style="flex: 2;">
						&nbsp
					</view>
					<view style="flex: 3;">
						<text
							style="background-color: #fcf0f0;padding: 6rpx;color: #e76444;line-height: 1.5;">客户单日限购不能大于单客总限购</text>
					</view>
				</view>
				<view class="content" style="display: flex;font-size: 30rpx;margin: 30rpx 0;align-items: center;">
					<view style="flex: 2;">
						单客户总限购
					</view>
					<view class="sku-select1" style="flex: 3;">
						<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
							<view class="flex-text" :class='ele.type == totalRestriction?"right-class-active":""'
								v-for="(ele,index1) in skuArr2" :key="index1" @click="tapAttr2(ele,'3')">
								{{ele.name}}
							</view>
						</view>
					</view>
				</view>
				<view v-if="showtotalRestriction" style="display: flex;margin-top: -20rpx;">
					<view style="flex: 2;">
						&nbsp
					</view>
					<view style="flex: 3;">
						<view class="text_input" style="height: 50rpx;">
							<u-number-box v-model="activeData.customerTotalLimit" button-size="28" inputWidth="60"
								@change="tolValChange" @blur="blur3"></u-number-box>
						</view>
					</view>
				</view>
				<view class="content" style="display: flex;font-size: 30rpx;margin: 30rpx 0;align-items: center;">
					<view style="flex: 2;">
						生效时间
					</view>
					<view style="flex: 3;">
						{{activeData.createDate}}至{{activeData.endDate}}
					</view>
				</view>
			</view>

		</view>

		<view class="footer">
			<view>
				<button :disabled="showNewTop == true || iscompareTrue == true" :color="bgColor" class="bg_color" :loading="loading"
					style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
					@click="confirmToChange()">确认修改</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getEnrolledProAPi,updateEnrolledProAPi
	} from "@/api/marketing.js";
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				dataFrom: {},
				oldPrice: '', //旧价格
				iscompareTrue: false,
				activeData: {
					enrolledActivityId: null,
					status: "",
					id: null,
					name: "",
					brandName: null,
					image: "",
					sku: "",
					operateCityId: null,
					operateCityName: "",
					price: null,
					activityPrice: null,
					promotionInventory: null,
					customerDailyLimit: null,
					customerTotalLimit: null,
					createDate: "",
					endDate: "",
					salesVolume: null,
					inventory: null,
					activeProductOperationRecordList: []
				},
				totalInventory: null, //尝鲜促销价
				newPrice: null,
				showNewTop: true,//价格错误
				// ------促销总库存模式--------
				skuArr2: [{
					name: "不限",
					type: '1'
				}, {
					name: "自定义",
					type: '2'
				}],
				totalInventoryModel: '1', //促销总库存
				totalInventoryNum: 1, //促销总库存初始值1
				showTotalInventory: false,
				//-------------------------------------
				daylimitModel: '1', //单日限购状态
				showDayLimitModel: false,
				dayLimitNum: 1, //单日限购初始值1
				//-------------------------------------
				totalRestriction: '1', //单客户总限购
				showtotalRestriction: false,
				totalRestrictionNum: 1, //单客户总限购初始值1
				//---------------------
				loading:false,
			};
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});

			let that = this;
			that.dataFrom = options;
			that.getEnrolledPro();
			
			
		},
		methods: {
			/* *获取商品信息 */
			getEnrolledPro() {
				getEnrolledProAPi(this.dataFrom).then((res) => {
					this.oldPrice = res.data.activityPrice; //旧活动数据
					this.activeData = res.data;
					this.showtotalRestriction = res.data.customerTotalLimit == -1 ? false:true;
					this.totalRestriction = res.data.customerTotalLimit == -1 ?'1':'2';
					
					this.showDayLimitModel = res.data.customerDailyLimit == -1 ? false:true;
					this.daylimitModel = res.data.customerDailyLimit == -1 ?'1':'2';
					
					this.showTotalInventory = res.data.promotionInventory == -1 ? false:true;
					this.totalInventoryModel = res.data.promotionInventory == -1 ?'1':'2';
					
				})
			},
			// ----------状态选择-sign:1总库存，2单日限购，3总限购----------
			tapAttr2(ele, sign) {
				if (sign == '1') {
					this.totalInventoryModel = ele.type;
					if (ele.type == '2') {
						this.showTotalInventory = true;
					} else {
						this.showTotalInventory = false;
						this.activeData.promotionInventory = -1
					}
				} else if (sign == '2') {
					this.daylimitModel = ele.type;
					if (ele.type == '2') {
						this.showDayLimitModel = true;
						this.activeData.customerDailyLimit = 1
					} else {
						this.showDayLimitModel = false;
						this.activeData.customerDailyLimit = -1
					}
					setTimeout(() => {
						this.compare();
					}, 100)
				} else if (sign == '3') {
					this.totalRestriction = ele.type;
					if (ele.type == '2') {
						this.showtotalRestriction = true;
						this.activeData.customerTotalLimit = 1
					} else {
						this.showtotalRestriction = false;
						this.activeData.customerTotalLimit = -1
					};
					setTimeout(() => {
						this.compare();
					}, 100)
				}
			},
			//------价格输入框失去焦点-------
			blur(res) {
				let numValue = (this.oldPrice * 0.99).toFixed(2)
				if (res.detail.value > numValue) {
					this.showNewTop = true;
				} else {
					this.showNewTop = false;
				}
			},

			// ----促销总库存----
			blur2(res) {
				if (res.value == "") {
					this.totalInventoryNum = 1;
				}
			},

			//--------单客户单日限购-----
			blur3(res) {
				console.log('res,', res)
				if (res.value == "") {
					this.dayLimitNum = 1;
				}
			},
			dayValChange(ele) {
				setTimeout(() => {
					this.compare();
				}, 100)
			},
			tolValChange() {
				setTimeout(() => {
					this.compare();
				}, 100)
			},
			//比较单日限购，与总限购大小
			compare() {
				let dataValue = this.activeData;
				if (dataValue.customerTotalLimit != -1 && dataValue.customerDailyLimit != -1) {
					let iscompareTrue = dataValue.customerDailyLimit > dataValue.customerTotalLimit ? true : false;
					this.iscompareTrue = iscompareTrue;
				} else {
					this.iscompareTrue = false;
				}
			},
			/* 确认修改 */
			confirmToChange() {
				let that = this;
				let activityData = this.activeData;
				let {
					status,
					image,
					createDate,
					endDate,
					salesVolume,
					inventory,
					activeProductOperationRecordList,
					id,
					...newObj
				} = activityData

				newObj.skuId = activityData.id;
                that.loading = true;
                updateEnrolledProAPi(newObj).then((res) => {
					uni.showToast({
						title: '修改成功',
						icon: 'success',
						duration: 1000 // 持续时间为 1 秒
					});
					that.loading = false;
					this.getEnrolledPro();
				}).catch(err => {
					console.log("addEnrolledProAPi error", err)
					that.loading = false;
				});

			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.main_color {
		@include main_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		// @include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	.card {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;

		.name-param {
			margin: 15rpx 0;
		}
	}

	.header-top {
		display: flex;
		// justify-content: space-between;
		align-items: center;

		.header_name {
			font-size: 31rpx;
			margin-left: 12rpx;
			font-weight: bolder;
			align-items: center;
			text-align: center;
		}
	}

	.sku-select1 {
		.flex-text {
			margin: 8rpx 8rpx;
			background-color: #fff;
			line-height: 62rpx;
			text-align: center;
			color: #777;
			padding: 0 24rpx;
			font-size: 28rpx;
			border-radius: 12rpx;
			border: 2rpx solid #dddddd;
		}

		.right-class-active {
			@include main_color(theme);
			// @include main_bg_rgba_color(theme, 0.05);
			border: 2rpx solid;
		}
	}

	.footer {
		position: fixed;
		bottom: 0px;
		width: 100%;
		padding: 10px;
		background-color: #FFF;
		align-items: center;
	}
</style>